var vue = new Vue({
	el:"#app",
	created:function(){
		this.initNewsNum();
	},
	methods:{
		initNewsNum:function (){					axios.get("http://localhost:8081/getNewsReport/")							.then(res=>{  								 this.newsSum(res.data.newssum);								 this.newsRank(res.data);								 this.periodRank(res.data);							})							.catch(error=>{								console.log(error);							});					},
		newsSum:function (data){
					var myChart_sum = echarts.init(document.getElementById('sum'));
				    var option = {
				        backgroundColor: '#fbfbfb',//背景色
				        title: {
				            text: '新闻话题曝光量【实时】统计',
				            subtext: '数据来自搜狗'
				        },
						
						
				        tooltip : {
				            formatter: "{a} <br/>{b} : {c}%"
				        },
				        toolbox: {
				            feature: {
				                restore: {},
				                saveAsImage: {}
				            }
				        },
				        series: [
				            {
				                name: '业务指标',
				                type: 'gauge',
				                max:50000,
				                detail: {formatter:'{value}个话题'},
				                data: [{value: 50, name: '话题曝光量'}]
				            }
				        ]
				    };
						
				    option.series[0].data[0].value = data;
				    myChart_sum.setOption(option, true);		
				},
		newsRank:function (json){	
					var myChart = echarts.init(document.getElementById('main'));
				        var option = {
				            backgroundColor: '#ffffff',//背景色
				            title: {
				                text: '新闻话题浏览量【实时】排行',
				                subtext: '数据来自搜狗',
				                textStyle: {
				                    fontWeight: 'normal',              //标题颜色
				                    color: '#408829'
				                },
				            },
				            tooltip: {
				                trigger: 'axis',
				                axisPointer: {
				                    type: 'shadow'
				                }
				            },
				            legend: {
				                data: ['浏览量']
				            },
				            grid: {
				                left: '3%',
				                right: '4%',
				                bottom: '3%',
				                containLabel: true
				            },
				            xAxis: {
				                type: 'value',
				                boundaryGap: [0, 0.01]
				            },
				            yAxis: {
				                type: 'category',
				                data:json.name
				            },
				            series: [
				                {
				                    name: '浏览量',
				                    type: 'bar',
				                    label: {
				                        normal: {
				                            show: true,
				                            position: 'insideRight'
				                        }
				                    },
				                    itemStyle:{ normal:{color:'#f47209',size:'50px'} },
				                    data: json.newscount
				                }
				
				            ]
				        };
				        myChart.setOption(option);
				    },
		 periodRank:function (json){
						var myChart_period=echarts.init(document.getElementById('period'));
				       var option = {
				            backgroundColor: '#ffffff',//背景色
				            color: ['#00FFFF'],
				            tooltip : {
				                trigger: 'axis',
				                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				                }
				            },
				            grid: {
				                left: '3%',
				                right: '4%',
				                bottom: '3%',
				                containLabel: true
				            },
				            xAxis : [
				                {
				                    type : 'category',
				                    data : json.logtime,
				                    axisTick: {
				                        alignWithLabel: true
				                    }
				                }
				            ],
				            yAxis : [
				                {
				                    type : 'value'
				                }
				            ],
				            series : [
				                {
				                    name:'新闻话题曝光量',
				                    type:'bar',
				                    barWidth: '60%',
				                    data:json.periodcount
				                }
				            ]
				        };
				        myChart_period.setOption(option, true);
				    }	
	}
})